<template>
  <div class="resources-dialog">
    <el-dialog :visible.sync="visible" destroy-on-close>
      <div class="panelWrap">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>{{ isEdit ? '编辑资源' : '添加资源' }}</div>
          <i class="el-icon-close" @click="handleCloseDialogUpdate" />
        </div>

        <el-form ref="form" :model="form" class="m-t-40 m-l-40" label-width="auto">
          <div class="flex flextc flexwrap">
            <!-- <el-form-item class="flex1 col1" v-if="!isEdit" label="系统ID">
            <el-input v-model="form.sysId" class="sysName " placeholder="请输入系统Id..." />
            </el-form-item>
            <el-form-item class="flex1 col1" v-if="!isEdit" label="资源ID">
              <el-input v-model="form.resourceId" class="sysName" placeholder="请输入资源ID..." />
            </el-form-item> -->
            <div class="flex co-rows">
              <el-form-item class="parentRes m-r-20" label="父资源">
                <!-- <el-input v-model="form.parentId" v-if="isEdit"  class="sysName" placeholder="请输入父资源..." /> -->
                <el-input v-model="form.parentId" class="sysName " placeholder="请输入父资源..." />
              </el-form-item>

              <el-form-item class="flex1 col1" label="父资源名称">
                <el-input v-model="form.parentName" :disabled="isEdit" class="sysName" :placeholder="isEdit ? '' : '请输入父资源...'" />
              </el-form-item>
            </div>

            <div class="flex co-rows">
              <el-form-item class="flex1 col1 m-r-20" label="资源名称">
                <el-input v-model="form.name" class="sysName" placeholder="请输入资源名称..." />
              </el-form-item>

              <el-form-item class="flex1 col1" label="资源类型">
                <el-select v-model="form.resourceType" class="sysName" placeholder="请选择资源类型">
                  <el-option label="菜单" value="1" />
                  <el-option label="操作" value="2" />
                </el-select>
              </el-form-item>
            </div>

            <div class="flex co-rows">
              <el-form-item class="flex1 col1 m-r-20" label="资源顺序">
                <el-input v-model="form.sort" class="sysName" placeholder="请输入资源顺序" />
                <!-- <el-select v-model="form.resourceSort" placeholder="请选择资源顺序">
              <el-option label="升序" value="1" />
              <el-option label="降序" value="0" />
            </el-select> -->
              </el-form-item>
              <el-form-item v-if="form.resourceType!=='2'" class="flex1 col1" label="资源图标">
                <el-input v-model="form.iconUrl" class="sysName" placeholder="请输入系统logo地址..." />
              </el-form-item>
            </div>

            <div class="flex resourcesUrl m-r-100">
              <el-form-item v-if="form.resourceType!=='2'" class="flex1 col1 m-r-25" label="资源链接url">
                <el-input v-model="form.url" class="res-link" placeholder="请输入系统入口地址..." />
              </el-form-item>

              <el-form-item class="flex1 sys col1" label="平台名称">
                <el-select v-model="form.sysName" class="sysSelect" filterable placeholder="请输入系统平台名称">
                  <el-option
                    v-for="item in systemList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>
          <!-- <el-form-item label="是否删除">
                <el-select v-model="form.isDel" placeholder="请选择是否删除">
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
              </el-form-item> -->

          <div class="flex co-image">
            <el-form-item v-if="form.resourceType!=='2'" class="resource" label="资源权限">
              <el-select v-model="form.displayType" class="select" placeholder="请选择资源权限">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item v-if="form.resourceType!=='2'" class="res-preview m-l-30" label="图片预览">
              <el-image class="editLogo" :src="form.iconUrl" fit="fill" lazy>
                <div slot="error" class="image-slot errorBox">
                  <el-image class="errorImg" :src="url" lazy fit="fill" />
                </div>
              </el-image>
            </el-form-item>
          </div>
        </el-form>
        <div class="flex flextc footer m-t-25 m-b-40">
          <el-button v-if="!isEdit" class="defaultbtn saveBtn btn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
          <el-button v-else type="success" class="defaultbtn btn m-r-30 el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
          <el-button class="defaultbtn clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateMenu, createMenuAdd } from '@/api/baseInfo/authority/menu'
import { findPlatforms } from '@/api/baseInfo/authority/resources'
import { showNotice } from '@/utils/toolclass'
// import { fetchSystemList } from '@/api/baseInfo/authority/system'

export default {
  name: 'System',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    addInfo: {
      type: Object,
      default: () => ({})
    },
    params: {
      type: Object,
      default: () => ({
        title: '添加',
        placeholder: '',
        location: ''
      })
    },
    isEdit: {
      type: Boolean
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      dataList: [],
      systemList: [],
      // sysValue: '',
      options: [
        {
          value: 1,
          label: '可用'
        },
        {
          value: 2,
          label: '不可用'
        }
      ],
      formOrigin: {
        displayType: '', // 显示类型（1：可用且可显示；2：可显示但不可用；）
        id: '', // ID
        name: '', // 菜单名称
        parentId: '', // 父级ID
        parentName: '', // 父级名称
        resourceType: '',
        sort: '', // 排序号
        sysId: '', // 平台ID
        sysName: '', // 平台名称
        url: '', // 系统URL
        version: '' // 版本号
      },
      form: { ...this.data },
      url: require('@/assets/error.png')
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      if (this.form.id === 0) {
        this.form = { ...this.formOrigin }
      }
      this.visible = v
    },
    data(v) {
      // console.log(v)
      // if (v.id === 0) {
      //   this.form = { ...this.formOrigin }
      // } else {
      //   this.form = { ...v }
      // }
      this.form = { ...v }
    }
  },
  mounted() {
  },
  created() {
    // addInfo
    this.getSystem()
  },
  methods: {
    getSystem() {
      findPlatforms().then(res => {
        if (res.code === '000000') {
          // console.log(res)
          this.systemList = res.data
        }
      })
    },
    handleSave(type) {
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '请输入资源名称')
        return
      }
      if (!(/^\S+$/.test(this.form.sort))) {
        showNotice('error', '提示', '请输入资源顺序')
        return
      }
      if (!(/^\S+$/.test(this.form.displayType))) {
        showNotice('error', '提示', '请选择资源权限')
        return
      }
      if (!(/^\S+$/.test(this.form.sysName))) {
        showNotice('error', '提示', '请选择平台')
        return
      }
      if (!(/^\S+$/.test(this.form.url))) {
        showNotice('error', '提示', '请输入菜单地址')
        return
      }
      const params = {
        displayType: this.form.displayType, // 显示类型（1：可用且可显示；2：可显示但不可用；）
        id: this.form.id, // ID
        name: this.form.name, // 菜单名称
        parentId: this.form.parentId, // 父级ID
        sort: this.form.sort, // 排序号
        sysId: this.form.sysId, // 平台ID
        sysName: this.form.sysName, // 平台名称
        url: this.form.url, // 系统URL
        version: this.form.version // 版本号
      }
      if (type === 0) {
        this.handleCreateAdd(params)
      } else {
        this.handleUpdate(params)
      }
    },
    handleCreateAdd(data) {
      createMenuAdd(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '添加成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          showNotice('error', '提示', res.msg)
        }
      })
    },
    handleUpdate(data) {
      updateMenu(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '修改成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          showNotice('error', '提示', res.msg)
        }
      })
    },
    handleRefresh() {
      this.refresh = true
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
    },
    handleCloseDialogUpdate() {
      this.$emit('handleRefresh')
      this.$emit('handleCloseDialog')
      this.form = { ...this.formOrigin }
    }
  }

}
</script>

<style lang="scss">
@import "@/styles/public.scss";
.resources-dialog {
  .panelWrap {
    margin-left: 200px;
    width: 800px;
    background: #ffffff;
    .co-rows {
      margin-left: -100px;
    }
  //   .co-image {}
    .resourcesUrl {
      .res-link {
        width: 200px;
      }
    }
    .sys {
      margin-left: -3px;
      .sysSelect {
        width: 200px;
      }
    }

    .resource {
      margin-left: 32px;
      .select {
        width: 200px
      }
    }
    .res-preview {
      margin-left: 22px;
    }
    .sysName {
      width: 200px;
    }
    .btn {
      width: 100px;
      height: 40px;
    }
    .editLogo {
      width: 200px;
      height: 100px;
      background: #eeeeee;
      border-radius: 5px;
    }
    .errorBox {
      background: #eeeeee;
      .errorImg {
        width: 60px;
        height: 60px;
        margin: 20px 0 0 70px;
      }
    }
  }
}

</style>
